<template>
  <div class="notStartExam">
    <head-Menu></head-Menu>
    <div class="NSEContainer">
     <el-collapse accordion>
        <el-collapse-item v-for="(EFData, i) in examFileList" v-if="examList[i].length > 0">
          <template slot="title">
            <span class="EFList">{{EFData.examFileName}}</span>
            <span style="text-align:right;margin-right:20px">最近一场考试结束:{{modifyFormat(nextExamEndList[i])}}</span>
          </template>
          <el-table :data="examList[i]" style="width: 100%;">
            <el-table-column width=200 label="考试名称" prop="examName" show-overflow-tooltip></el-table-column>
            <el-table-column width=150 label="课 目" prop="subject"></el-table-column>
            <el-table-column width=200 label="试 卷" prop="examPaper" show-overflow-tooltip></el-table-column>
            <el-table-column width=200 label="开始时间" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{modifyFormat(examList[i][scope.$index].examStart)}}</span>
              </template>
            </el-table-column>
            <el-table-column width=200 label="结束时间" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{modifyFormat(examList[i][scope.$index].examEnd)}}</span>
              </template>
            </el-table-column>
            <el-table-column width=150 label="考试时间" prop="examTime"></el-table-column>
            <el-table-column width=150 >
              <template slot-scope="scope">
                <el-button @click="startExam(scope.$index, scope.row, EFData.examFileName, i)" type="primary" icon='el-icon-edit' size="medium" round>开始考试</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div> 
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getStuExamFile } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      examFileList: {},
      examList: {},
      nextExamEndList: [],
    }
  },
  components: {
    headMenu
  },
  props: {
    params: {
        type: Object,
        default:{}
    }
  },
  created() {
    this.getStuExamFile(this.params)
  },
  methods: {
    async getStuExamFile(inf){
      await getStuExamFile(inf)
        .then((res) => {
          this.examFileList = res.examFileList
          this.examList = res.examList
          this.nextExamEndList = res.nextExamEndList
        })
    },
    startExam(index, row, examFileName, i){
      if (new Date(this.examList[i][index].examStart) <= new Date()) {
        this.$confirm('考试开始将不能中途停止，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.setItem('toExam', JSON.stringify({
            examFileName,
            examName: row.examName,
            examPaper: row.examPaper,
            subject: row.subject,
            EndTime: new Date(new Date().setMinutes(new Date().getMinutes() + Number(row.examTime)))
          }))
          this.$router.push({
            path:'/student/startExam',
          })
        })
      }else{
        this.$message({
          message: '考试暂未开始',
          type: 'warning'
        });
      }
     
    },
    modifyFormat(date){
      let t_mouth = (new Date(date).getMonth() + 1) < 10 ? ('0' + (new Date(date).getMonth() + 1)) : (new Date(date).getMonth() + 1)
      let t_date = new Date(date).getDate() < 10 ? ('0' + new Date(date).getDate()) : new Date(date).getDate()
      let t_hour = new Date(date).getHours() < 10 ? ('0' + new Date(date).getHours()) : new Date(date).getHours()
      let t_min = new Date(date).getMinutes() < 10 ? ('0' + new Date(date).getMinutes()) : new Date(date).getMinutes()
      return new Date(date).getFullYear() + '-' + t_mouth + '-' + t_date + '  ' + t_hour + ":" + t_min
    },
  },
}
</script>

<style lang='stylus'>
.notStartExam
  flex 1 1 100%
  display block
  .NSEContainer
    margin 0 10px
    border 1px solid #CCCCCC  
    text-align center
    .EFList
      flex 1
      text-align left
      margin-left 10px
      font-weight 600
      font-size 16px
      font-family '黑体'
    .el-collapse-item__header
      box-shadow 2px 2px 8px #ccc
</style>